<template>
  <div class="wechat-nav">
    <!--S手机界面-->
    <div id="mobile">
      <div class="header">
        自定义菜单
      </div>
      <div id="footer">
        <!--S键盘图标-->
        <div id="keyboard">
          <svg-icon class="icon" icon-class="keyboard" />
        </div>
        <!--E键盘图标-->

        <!--S导航列表-->
        <div id="navs">
          <div
            v-for="(item,index) in navs"
            :key="index"
            class="main-nav"
            :class="item.selected ? 'select' : ''"
            @click="clickMainNav(index,item)"
          >
            <template v-if="item.status === 0">
              <i class="el-icon-plus" />添加菜单
            </template>
            <template v-if="item.status === 1">
              {{ item.label }}
            </template>
            <!--S子菜单-->
            <div v-if="item.status" class="children-navs" @click.stop>
              <div class="children-navs-box">
                <div
                  v-for="(children_item,children_index) in item.children"
                  :key="children_index"
                  class="children-navs-item"
                  :class="children_item.selected ? 'select' : ''"
                  @click="clickChildrenNav(index,children_index,children_item)"
                >
                  {{ children_item.label }}
                </div>
                <div
                  v-if="item.children.length < 5"
                  class="children-navs-item"
                  @click="pushChildren(index)"
                >
                  <i class="add-icon el-icon-plus" />
                </div>
              </div>
            </div>
            <!--E子菜单-->
          </div>
          <div
            v-if="navs.length < 3"
            class="main-nav"
            @click="pushMain"
          >
            <i class="el-icon-plus" />添加主菜单
          </div>
        </div>
        <!--E导航列表-->
      </div>
    </div>
    <!--E手机界面-->

    <!--S右侧编辑菜单-->
    <el-card id="edit">
      <div slot="header" class="clearfix">
        <span>菜单编辑</span>
        <el-button style="float: right; padding: 3px 0;color:red;" type="text" @click="remove">删除菜单</el-button>        <el-button style="float: right; padding: 3px 0;margin-right: 20px;" type="text" @click="submit">
          确认设置
        </el-button>
      </div>
      <!--S表单-->
      <el-form
        ref="form"
        :model="selected.data"
        :rules="rules"
      >
        <el-form-item label="菜单名称" prop="label">
          <el-input v-model="selected.data.label" placeholder="菜单名称" />
        </el-form-item>
        <el-form-item label="菜单类型" prop="attribute">
          <br>
          <el-select v-model="selected.data.attribute" placeholder="菜单类型">
            <el-option value="link" label="链接" />
            <el-option value="app" label="应用入口" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="selected.data.attribute === 'link'" label="链接url" prop="value">
          <el-input v-model="selected.data.value" placeholder="链接url" />
        </el-form-item>
      </el-form>
      <!--E表单-->
    </el-card>
    <!--E右侧编辑菜单-->
  </div>
</template>

<script>
export default {
  name: 'WechatNav',
  props: {
    setting: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      /**
       * status: 0=未设置 1=一级菜单 2=二级菜单
       */
      navs: [
        {
          status: 0,
          label: '菜单名称',
          type: 'main',
          attribute: 'link',
          value: '', // 导航触发内容 link=链接 app=触发关键词
          children: []
        }
      ],
      /**
       * 选中的导航数据
       */
      selected: {
        // 选中的下标
        index: [],
        // 选中的数据
        data: {
          // 菜单名称
          label: '菜单名称',
          // 菜单类型属性 link=外链 app=触发应用
          attribute: 'link',
          // 链接url
          link: ''
        }
      },
      rules: {
        label: [
          { required: true, message: '菜单名称不能为空' }
        ]
      }
    }
  },
  watch: {
    setting(value) {
      if (value.wechat_navs) {
        this.formatNavs()
        this.reloadNavSelected()
      }
    }
  },
  methods: {
    // 格式化导航
    formatNavs() {
      const navs = []
      this.setting.wechat_navs.forEach((item) => {
        item['selected'] = parseInt(item['selected'])
        item['status'] = parseInt(item['status'])
        if (!item['children']) {
          item['children'] = []
        }
        navs.push(item)
      })
      this.navs = navs
      setTimeout(() => {
        this.clickMainNav(0, this.navs[0])
      }, 100)
    },
    // 提交
    submit() {
      let wechat_navs = null
      for (let i = 0; i < this.navs.length; i++) {
        if (parseInt(this.navs[i].status) === 1) {
          wechat_navs = this.navs
          break
        }
      }
      this.$put('setting/wechat', {
        wechat_navs
      })
        .then((res) => {
          this.$message.success({
            message: '修改成功',
            type: 'success'
          })
        })
        .catch((error) => {
          this.$handleError(error)
        })
    },
    // 插入主菜单
    pushMain() {
      this.navs.push(
        {
          status: 0,
          label: '菜单名称',
          type: 'main',
          attribute: 'link',
          value: '', // 导航触发内容 link=链接 app=触发关键词
          children: []
        }
      )
    },
    // 插入子菜单
    pushChildren(index) {
      this.navs[index].children.push(
        {
          label: '子菜单名称',
          type: 'children',
          attribute: 'link',
          value: '', // 导航触发内容 link=链接 app=触发关键词
          selected: 0
        }
      )
      this.$forceUpdate()
    },
    // 点击导航
    clickMainNav(index, item) {
      this.reloadNavSelected()
      this.selected = {
        index: [index],
        data: item
      }
      this.$set(this.navs[index], 'selected', 1)
      if (this.navs[index].status === 0) {
        this.$set(this.navs[index], 'status', 1)
      }
    },
    // 点击子菜单
    clickChildrenNav(index, children_index, item) {
      this.reloadNavSelected()
      this.selected = {
        index: [index, children_index],
        data: item
      }
      this.$set(item, 'selected', 1)
    },
    // 重载导航选中状态
    reloadNavSelected() {
      this.navs.forEach((item) => {
        this.$set(item, 'selected', 0)
        if (item.children.length > 0) {
          item.children.forEach((childrenItem) => {
            this.$set(childrenItem, 'selected', 0)
          })
        }
      })
    },
    // 移除菜单
    remove() {
      const { data, index } = this.selected
      if (index.length <= 0) return false
      if (data.type === 'main') {
        this.navs.splice(index[0], 1)
        if (this.navs.length > 0) {
          setTimeout(() => {
            this.clickMainNav(0, this.navs[0])
          }, 100)
        } else {

        }
      } else {
        this.navs[index[0]].children.splice(index[1], 1)
        setTimeout(() => {
          this.clickMainNav(index[0], this.navs[index[0]])
        }, 100)
      }
      this.reloadNavSelected()
    }
  }
}
</script>

<style lang="scss" scoped>
  #mobile{
    float: left;
    position: relative;
    width: 300px;
    height: 500px;
    border: 1px solid #97a8be;
    box-sizing: border-box;
    .header{
      width: 100%;
      height: 60px;
      background: url("../../../../../assets/images/mobile-header.png") no-repeat;
      background-size: cover;
      color: #fff;
      text-align: center;
      line-height: 80px;
      font-size: 14px;
    }
    #footer{
      position: absolute;
      width: 100%;
      height: 50px;
      bottom: 0;
      background: #FAFAFA;
      cursor: pointer;
      border-top: 1px solid #97a8be;
      #keyboard{
        float: left;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        border-right: 1px solid #97a8be;
        box-sizing: border-box;
      }
      #navs{
        float: left;
        width: 248px;
        height: 49px;
        display: flex;
        display: -webkit-flex;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        .main-nav{
          &.select{
            background: #2D8CF0;
            color: #fff;
          }
          &:last-child{
            border: none;
          }
          position: relative;
          flex:1;
          font-size: 13px;
          color: #61617A;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-right: 1px solid #97a8be;
          .children-navs{
            position: absolute;
            top:-248px;
            left:50%;
            width: 82.5px;
            height: 250px;
            transform: translateX(-50%) scale(.95);
            font-size: 12px;
            .children-navs-box{
              position: absolute;
              bottom: 0;
              width: 100%;
              border: 1px solid #97a8be;
              .children-navs-item{
                &.select{
                  background: #2D8CF0;
                  color: #fff;
                }
                height: 50px;
                color: #61617A;
                border-bottom: 1px solid #ccc;
                background: #FAFAFA;
                &:last-child{
                  border: none;
                }
                .add-icon{
                  position: relative;
                  top:3px;
                  display: inline-block;
                  font-size: 20px;
                  color: #bbb;
                }
              }
            }
          }
        }
      }
    }
  }
  #edit{
    width: 700px;
    height: 500px;
    float: left;
    margin-left: 10px;
  }
</style>
